import React, { Component } from 'react';
import {
	Text,
	View,
	StyleSheet,
	RefreshControl,
	TouchableOpacity,
	DeviceEventEmitter,
	ScrollView,
    WebView,
    Animated,
    TouchableHighlight
} from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import ViewUtils from '../utils/ViewUtils';
import DeviceUtils from '../utils/DeviceUtils';
import NavigationBar from '../components/NavigationBar';
import actioncoll from '../actions';

class BasicComment extends Component{

    constructor(props){
        super(props)
        this.state = {
            isAddCommentSuccess: false
        }
    }

    componentDidMount(){
        this.props.GetArticleCommentPager(this.props.articleId)
    }
  
    GetArticleCommentPager(){
       
        this.props.GetArticleCommentPager(this.props.articleId)
        
    }
    
    shouldComponentUpdate(nextProps, nextState){
        if (nextProps.isAddCommentSuccess) {
        //    this.props.GetArticleCommentPager(this.props.articleId)
            return false;
          }
        return true
    }
    componentWillReceiveProps(nextProps){
        if (nextProps.isAddCommentSuccess) {
            this.props.GetArticleCommentPager(this.props.articleId)
        }
    }
    render(){
        return (
            <View>
                {this.props.comments.map((comment,i)=>{
                   return (
                       <View  key={comment.ID} style={{padding:10}}>
                            <View style={{width: DeviceUtils.deviceWidth ,height:20,paddingLeft: 5}}>
                                <Text style={{color:'cyan',fontSize:16}}>{unescape(comment.USER_NAME)}:</Text>
                            </View>
                            <View style={{padding: 10}}>
                                <Text style={{fontSize:14}}>{unescape(comment.CONTENT)}</Text>
                            </View>
                        </View>
                   ) 
                })}
                <View style={{height: 60}}></View>
            </View>
                    
        )
    }
}

var styles = StyleSheet.create({
    container: {
        position: "absolute",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: "transparent",
        justifyContent: "center",
        alignItems: "center",
    },
    toastStyle: {
        width: 250,
        height: 250,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "white"
    }
})

export default connect(
	state => ({
        comments: state.commentReducer.comments,
        isAddCommentSuccess: state.commentReducer.isAddCommentSuccess
	}),
	dispatch => ({
		GetArticleCommentPager: (articleId, currentPage, pageSize) => dispatch(actioncoll.GetArticleCommentPager(articleId, currentPage, pageSize)),
	})
)(BasicComment);
